<template>
  <div class="my">
    <!-- 头部 -->
    <div class="bg">
      <van-cell :title="userInfo.name" :border="false" is-link>
        <template #default>
          <div @click="$router.push('/userinfo')">个人信息</div>
        </template>
        <template #icon>
          <van-image class="img" round :src="userInfo.photo" />
        </template>
      </van-cell>

      <!-- 粉丝点赞等 -->
      <div class="bg-bottom">
        <div class="bg-bottom-item">
          <div>{{ userInfo.art_count }}</div>
          <div>动态</div>
        </div>
        <div class="bg-bottom-item">
          <div>{{ userInfo.follow_count }}</div>
          <div>关注</div>
        </div>
        <div class="bg-bottom-item">
          <div>{{ userInfo.fans_count }}</div>
          <div>粉丝</div>
        </div>
        <div class="bg-bottom-item">
          <div>{{ userInfo.like_count }}</div>
          <div>被赞</div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div>
      <!-- 底部1 -->
      <div class="bottom1">
        <van-grid :border="false" :column-num="2">
          <van-grid-item text="我的收藏" @click="$router.push('collect')">
            <template #icon>
              <van-icon size="30" color="#1989fa" name="phone-o" />
            </template>
          </van-grid-item>
          <van-grid-item text="阅读历史" @click="$router.push('history')">
            <template #icon>
              <van-icon size="30" color="#1989fa" name="coupon-o" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 底部2 -->
      <div class="bottom2">
        <div class="more">更多服务</div>
        <van-grid :border="false">
          <van-grid-item text="用户反馈">
            <template #icon>
              <van-icon size="30" color="#1989fa" name="like-o" />
            </template>
          </van-grid-item>
          <van-grid-item text="小智同学">
            <template #icon>
              <van-icon size="30" color="#1989fa" name="phone-o" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserOwnInfo } from '@/api/my'
export default {
  name: 'MyIndex',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    this.getUserOwnInfo()
  },
  methods: {
    async getUserOwnInfo () {
      try {
        const res = await getUserOwnInfo()
        this.userInfo = res.data
      } catch (err) {
        this.$toast.fail('获取用户信息失败')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.bg {
  padding: 20px;
  color: #efefef;
  height: 250px;
  background-color: rgb(88, 88, 190);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  .van-cell {
    background-color: transparent;
    display: flex;
    align-items: center;
    color: #efefef;
    .van-cell__value {
      color: #efefef;
    }
    .van-cell__right-icon {
      color: #efefef;
    }
  }
  .img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .bg-bottom {
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
    .bg-bottom-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
.bottom1 {
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 15px;
  margin-top: -29px;
}
.bottom2 {
  .more {
    margin-left: 20px;
    font-size: 16px;
  }
  border-radius: 10px;
  overflow: hidden;
  margin: 15px 15px;
  padding-top: 10px;
  background-color: #fff;
}
</style>
